<template>
    <el-dropdown trigger="click" class="p-map-lable" @command="handleMapLabeItem">
        <div>
            <i class="icon icon-ditu" />
        </div>
        <el-dropdown-menu class="el-dropdown-menu-map-label" slot="dropdown">
            <el-input
                size="small"
                :placeholder="$t('lang.maplabelPlaceholder')"
                v-model="currentName"
                @keydown.enter="handleMapLabelAdd"
            ></el-input>
            <el-dropdown-item
                :tabindex="position"
                :key="position"
                v-for="(itm, position) in mapLabels"
                :command="itm.dimensions"
            >
                <span>{{ itm.name }}</span>
                <i class="icon el-icon-refresh" @click.stop="handleMapLabelUpdate(position)"></i>
                <i class="icon el-icon-delete" @click.stop="handleMapLabelDel(position)"></i>
            </el-dropdown-item>
        </el-dropdown-menu>
    </el-dropdown>
</template>

<script>
import * as Utils from '../core/utils.js';
import bus from '../utils/Eventbus';
import _ from 'lodash';
import i18n from '../lang/index.js';
const $t = i18n.global.t;
/**
 * p-map-lable
 * 自定义快捷地图列表
 * @author wangdasong
 * @date 2023.01.28
 */
export default {
    name: 'p-map-lable',
    props: {},
    data() {
        return {
            mapLabels: [],
            currentName: '',
            local: {}
        };
    },
    computed: {},
    mounted() {
        this.init();
    },
    methods: {
        init() {
            this.getLocalMapLabels();
        },
        getLocalMapLabels() {
            this.local = Utils.getLocalStorage('LOCAL_MAP_LABELS');
            this.mapLabels = this.local.get('mapLabels') || [];
            this.currentName = $t('lang.customMapLabel') + (this.mapLabels.length + 1);
        },
        //地图列表点击-进入当前选中区域
        handleMapLabeItem(dimensions) {
            console.log('p-map-label.handleMapLabeItem:', dimensions);
            // bus.emit('p-painter.dimensionsChange', dimensions);
            bus.emit('p-painter.dimensionsChange', _.cloneDeep(dimensions));
        },
        //列表-更新 当前快捷方式
        handleMapLabelAdd() {
            if (this.currentName && this.currentName.length > 0) {
                console.log('p-map-label.handleMapLabelAdd:', this.currentName);
                bus.emit('p-painter.saveCurrentMapDimensions', this.currentName);
                this.getLocalMapLabels();
            } else this.$message.error($t('lang.maplabelPlaceholder'));
        },
        //列表-更新 当前快捷方式
        handleMapLabelUpdate(position) {
            console.log('p-map-label.handleMapLabelUpdate:', position);
            if (position >= 0) bus.emit('p-painter.updateCurrentMapDimensions', position);
            this.getLocalMapLabels();
        },
        //列表-删除当前快捷方式
        handleMapLabelDel(position) {
            console.log('p-map-label.handleMapLabelDel:', position);
            this.mapLabels.splice(position, 1);
            this.local.set('mapLabels', this.mapLabels);
            this.getLocalMapLabels();
        }
    }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<!-- <style scoped lang="scss"> -->
<style rel="stylesheet/scss" lang="scss">
.p-map-lable {
    .icon-map {
        cursor: pointer;
        font-size: 22px;
        font-weight: 500;
    }
}
.el-dropdown-menu-map-label {
    padding: 5px 15px;
    .el-input {
        .el-input__inner {
            padding: 0 5px;
        }
    }
    .el-dropdown-menu__item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0;
        span {
            flex: 1;
        }
        i {
            width: 16px;
            height: 16px;
            font-size: 16px;
            margin-left: 15px;
        }
    }
}
</style>
